{% extends "view/home/inc_baseNew.html" %}
{% block style%}
<link href="/static/assets/css/layout-shop.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link href="/static/assets/city-picker/css/city-picker.css" rel="stylesheet">
{% endblock %}
{% block content %}
{%set cate = category.id|get_cate()%}
{%if category.pid !=0%}
{%column data="column",pid=category.pid%}
{%else%}
{%column data="column",cid=category.id%}
{%endif%}
<!-- 
PAGE HEADER 

CLASSES:
.page-header-xs	= 20px margins
.page-header-md	= 50px margins
.page-header-lg	= 80px margins
.page-header-xlg= 130px margins
.dark			= dark page header

.shadow-before-1 	= shadow 1 header top
.shadow-after-1 	= shadow 1 header bottom
.shadow-before-2 	= shadow 2 header top
.shadow-after-2 	= shadow 2 header bottom
.shadow-before-3 	= shadow 3 header top
.shadow-after-3 	= shadow 3 header bottom
-->
<style>
div.shop-item {
    margin-bottom: 0;
}
.shop-item-diqu{
    text-align: left;
}
.ivu-tag-blue {
    line-height: 20px;
    background: #e6f7ff;
    border-color: #91d5ff;
}
.ivu-tag {
    display: inline-block;
    height: 22px;
    padding: 0 8px;
    border: 1px solid #1374d4;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
}
.ivu-tag-blue .ivu-tag-text {
    color: #1890ff!important;
}
.shop-item-info{
    display: flex;
    justify-content: space-between;
}
.panel-default {
    border-color: #ddd;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    text-align: center;
}
.shop-item-image{
    padding: 10px 10px 0 10px;
}
div.shop-item-summary{
    padding-top:0;
}
div.shop-item-summary h2{
    font-size: 17px;
}
div.shop-item-price{
    font-size: 20px;
    font-weight: initial;
    margin: 6px;
}
div.shop-item-price span{
    color: #ed1a24!important;
    font-weight: lighter;
    padding:0 0 0 2px;
}
div.shop-item-shuliang {
    font-size: 15px;
    font-weight: lighter;
    border-top: 1px solid #9999991a;
}
@media (min-width: 992px){
    .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-lg-10 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
}
.col-lg-2 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
}
.panel-tuijian{
    margin: 0;
    border: 1px solid #9999991a;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 25px;
    color: inherit;
    height: 70px;
    line-height: 70px;
    text-align: center;
}
.btn-primary {
    border-radius:0;
}
.btn-fabu{
    margin-top:20px;
    height: 70px;
    line-height: 70px;
}
.btn-fabu a{
    margin: 0 30px;
}
.btn-shaixuan{
    margin-top:20px;
    height: 50px;
    line-height: 50px; 
    display:flex; 
    padding:0 20px;
    justify-content: space-between;
}
.filter-btn{
    margin-left: 50px;
}
table {
    background-color: #fff;
    font-family: "Segoe UI","Microsoft Yahei",arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    /* font-size: 1rem; */
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-align:left;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
}
table .btn {
    margin: 0 3px;
}
.btn {
    position: relative;
}
.btn-sm, .btn-xs, .btn-lg, .btn-xlg {
    height: auto;
    font-size: inherit;
}
.relative {
    position: relative;
}
.btn-group-xs>.btn, .btn-xs {
    padding: 1px 5px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-danger {
    color: #fff;
    background-color: #ed1a24;
    border-color: #ed1a24;
}
.text-danger{
    color:#ed1a24!important;
}
.xinxifabu{
    font-size: 14px;
}
.city-picker-span{
    color: #fff;
    background-color: #ed1a24;
    border-color: #ed1a24;
    border-bottom:0;
    border-radius:3px;
    padding: 0 4px;
}
.city-picker-span > .placeholder{
    color: #fff;
}
.city-picker-span > .title > span{
    color: #fff;
    padding:0;
}
.city-select a.active{
    color: #fff;
    background-color: #ed1a24;
}
.city-select-tab > a.active{
    color: #000;
}
.city-picker-span > .title > span:hover {
    background-color: #ed1a24;
}
.panel-default{
    margin-top: 20px;
}
.shop-item-image img{
    width: 185px;
    height: 145px;
}
.nomargin .panel{
    margin-top: 0;
}
ul.shop-item-list li .panel{
    margin-top:0;
}
.btn-fabu a{
    width:120px;
}
</style>
<section class="page-header page-header-xs" >
    <div class="container xinxifabu">
        {%if column|length>0%}
        <h1>{{category.title}}</h1>
        {%endif%}

        <!-- page tabs -->

        {%if column|length>0%}
        <ul class="page-header-tabs list-inline">

            <li {%if breadcrumb[0].id == category.id %}class="active"{%endif%}><a href="{{breadcrumb[0].url}}">全部</a></li>
            {%for val in column%}
            <li  {%if val.id == category.id %}class="active"{%endif%}><a href="{{val.url}}">{{val.name}}</a></li>
            {%endfor%}
        </ul>
        {%endif%}
        <!-- /page tabs -->
    </div>
</section>
<!-- /PAGE HEADER -->




<!-- -->
<section>
    <div class="container xinxifabu">

        <div class="row">

            <!-- RIGHT -->
            <div class="col-lg-10 col-md-10 col-sm-10 ">
                <!-- LIST OPTIONS -->
                {% if mokuaibiaoshi %}
                <div class="panel panel-default btn-fabu">
                    <a class="btn btn-primary" {{('/xinxifabu?mokuaibiaoshi='+mokuaibiaoshi)|get_auth_url(controller.user)| safe}} role="button">{%if mokuaibiaoshi ==2%}商品挂单{%else%}一键发布{%endif%}</a>
                    {%if mokuaibiaoshi!=1%}<a class="btn btn-primary" {{('/xiadan?mokuaibiaoshi='+mokuaibiaoshi)|get_auth_url(controller.user)| safe}} role="button">{%if mokuaibiaoshi ==2%}商品下单{%else%}点就收{%endif%}</a>{%endif%}
                </div>
                {%endif%}
                <!--分类信息-->
                {% include "view/home/inc_sort.html" %}
                <!--/分类信息-->
                <div class="panel panel-default btn-shaixuan">
                        <div>
                        地区：
                            <div class="btn-group btn-xs" style="position:relative;">
                                <input readonly type="text" data-toggle="city-picker" value="{{diqu}}">
                            </div>
                            <div class="btn-group btn-xs" style="position:relative;">
                                <button class="btn btn-warning btn-xs" id="resetdiqu" type="button">重置地区</button>
                            </div>
                            
                        </div>

                        <!-- <div>
                        类型：<div class="btn-group btn-group-sm btn-xs">
                                <button type="button" class="btn btn-danger  btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    供应
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <button class="dropdown-item" type="button">供应</button>
                                    <button class="dropdown-item" type="button">承接加工</button>
                                    <button class="dropdown-item" type="button">委托加工</button>
                                </div>
                        </div>
                        </div> -->
                        <div>
                            <a  href="{{ctx.path}}?sortQuery={{sortQuery|jsonToStr}}&{{ctx.query|query_string(['sortQuery'])}}">单价 
                                <span style="color: #9E9E9E;" class="oi {{arrow}}"></span>
                            </a>
                        </div>
                        {%if totalPages>0%}
                        <div style="display: flex;"><a href="{{ctx.path}}?page={{page|int-1 or 1}}&{{ctx.query|query_string(['page'])}}" >
                                <span style="
                                color: #9E9E9E; padding: 0 5px;
                            " class="oi oi-chevron-left"></span>
                                <span class="sr-only">Previous</span>
                                {% set nextpage = page|int+1;%}{%if nextpage>totalPages %} {% set nextpage= totalPages %}{%endif%}
                              </a>{{page}}/{{totalPages}}<a href="{{ctx.path}}?page={{totalPages}}&{{ctx.query|query_string(['page'])}}">
                                <span style="
                                color: #9E9E9E; padding: 0 5px;
                            " class="oi oi-chevron-right"></span>
                                <span class="sr-only">Next</span>
                              </a>
                        </div>
                        {%endif%}
                </div>

                <!-- /LIST OPTIONS -->


                <ul class="shop-item-list row list-inline ">
                    {% for item in list%}
                    <!-- ITEM -->
                    <li class="col-xs-6 col-lg-3 col-md-3 col-sm-3 ">
                        <div class="panel panel-default">
                            <div class="panel-body shop-item nomargin nopadding">
                                {% set pic = item.tupian| strToJson%}
                                <div class="thumbnail nomargin noborder" >
                                    <!-- product image(s) -->
                                    <a class="shop-item-image" href="/home/gongxufabu/detail/?id={{item.id}}" title="{{item.title}}" target="_blank" style="overflow: hidden">
                                        {%if pic.length >0 %}
                                        <img class="img-responsive lazy" src="/static/assets_new/img/blank.png" data-original="{{pic[0]}}" alt="" />
                                        {% else %}
                                        <img src="/static/assets_new/img/blank.png">
                                        {% endif %}
                                    </a>
                                    <!-- /product image(s) -->
                                </div>
                            </div>
                            <div class="panel-footer padding-3">
                                <div class="shop-item-summary text-center">
                                    <h2 class="text-intercept"><a class=""  href="/home/gongxufabu/detail/?id={{item.id}}" title="{{item.title}}" target="_blank">{{item.shangpingleibie}}</a></h2>
                                    <!-- price -->
                                    <div class="shop-item-price text-danger f-16 nomargin">
                                        {{item.jiage|formatCurrencyNoDot}}<span>元/吨</span>
                                    </div>
                                    <div class="shop-item-shuliang text-danger f-16 nomargin">
                                        {{item.shangpingshuliang|formatCurrencyNoDot}} 吨
                                    </div>
                                    <div class="f-16 nomargin shop-item-diqu">
                                            {{item.diqu}}
                                    </div>
                                    <div class="shop-item-info">
                                        <div class="f-16 nomargin shop-item-diqu">
                                                {{item.chuangjianshijian|moment('YYYY-MM-DD')}}
                                        </div>
                                        <div class="ivu-tag ivu-tag-blue ivu-tag-checked">
                                                <span class="ivu-tag-text ivu-tag-color-white">{{item.xinxileixing|get_gongxutype}}</span>
                                        </div>
                                    </div>
                                    
                                    <!-- /price -->

                                   
                                </div>
                            </div>
                        </div>


                    </li>
                    <!-- /ITEM -->
                    {%endfor%}

                </ul>
                <!-- Pagination Default -->
                <!-- LIST OPTIONS -->
                {%if totalPages>1%}
                <div class="panel panel-default form-inline" style="justify-content: center;">
                        <nav aria-label="Page navigation">
                                <ul class="pagination flex-wrap">
                                  <li class="page-item">
                                    <a class="page-link" href="{{ctx.path}}?page={{page|int-1 or 1}}&{{ctx.query|query_string(['page'])}}" aria-label="Previous">
                                      <span aria-hidden="true">&laquo;</span>
                                      <span class="sr-only">Previous</span>
                                    </a>
                                  </li>
                                  {% for i in range(1, totalPages+1) -%}
                                  <li class="page-item {% if i==page%}active {%endif%}"><a class="page-link" href="{{ctx.path}}?page={{i}}&{{ctx.query|query_string(['page'])}}">{{ i }}</a></li>
                                  {%- endfor %}
                                  <li class="page-item">
                                    {% set nextpage = page|int+1%}{%if nextpage>totalPages %} {% set nextpage= totalPages %}{%endif%}
                                    <a class="page-link" href="{{ctx.path}}?page={{nextpage}}&{{ctx.query|query_string(['page'])}}" aria-label="Next">
                                      <span aria-hidden="true">&raquo;</span>
                                      <span class="sr-only">Next</span>
                                    </a>
                                  </li>
                                </ul>
                              </nav>
                        <div class="form-inline"  ><span style="margin: 0 1rem">到</span><input style="width: 60px;" type="number" name="pagenum" min="1" max="5" class="form-control form-control-sm mb-2 mr-sm-2"><span style="margin: 0 1rem 0 .5rem ">页</span><a class="page-link" href="javascript:gotoPage();" aria-label="Next">确定</a></div>

                </div>
                {%endif%}   
                <!-- /LIST OPTIONS -->
                <!-- /Pagination Default -->

            </div>


            <!-- LEFT -->
            <div class="col-lg-2 col-md-2 col-sm-2">
                <!-- /CATEGORIES -->
                <div class="panel panel-default hotgoods">
                    <div class="panel-heading">
                        <h2 class="panel-title">信息推荐</h2>
                    </div>
                    <div class="panel-body padding-10" >
                        <div class="owl-carousel featured nomargin" data-plugin-options='{"singleItem": true, "stopOnHover":false, "autoPlay":false, "autoHeight": false, "navigation": true, "pagination": false}'>

                                    <ul class="list-unstyled nomargin nopadding text-left">
                                        {% for item in tuijianData %}
                                        {% set pic = item.tupian|strToJson%}
                                        <li class="clearfix"><!-- item -->
                                            <div class="panel panel-default panel-tuijian">
                                                    <div class="panel-body shop-item nomargin nopadding">
                                                        {% set pic = item.tupian|strToJson%}
                                                        <div class="thumbnail nomargin noborder" >
                                                            <!-- product image(s) -->
                                                            <a class="shop-item-image" href="/home/gongxufabu/detail/?id={{item.id}}" title="{{item.title}}" target="_blank" style="overflow: hidden">
                                                                {%if pic|length >0 %}
                                                                <img class="img-responsive lazy" src="/static/assets_new/img/blank.png" data-original="{{pic[0]}}" alt="" />
                                                                {% else %}
                                                                <img src="/static/assets_new/img/blank.png">
                                                                {% endif %}
                                                            </a>
                                                            <!-- /product image(s) -->
                                                        </div>
                                                    </div>
                                                    <div class="panel-footer padding-3">
                                                        <div class="shop-item-summary text-center">
                        
                                                            <h2 class="text-intercept"><a class=""  href="/home/gongxufabu/detail/?id={{item.id}}" title="{{item.title}}" target="_blank">{{item.shangpingleibie}}</a></h2>
                                                            <!-- price -->
                                                            <div class="shop-item-price text-danger f-16 nomargin">
                                                                {{item.jiage|formatCurrencyNoDot}}<span>元/吨</span>
                                                            </div>
                                                            <div class="shop-item-shuliang text-danger f-16 nomargin">
                                                                    {{item.shangpingshuliang|formatCurrencyNoDot}} 吨
                                                            </div>
                                                            <div class="f-16 nomargin shop-item-diqu">
                                                                    {{item.diqu}}
                                                            </div>
                                                            <div class="shop-item-info">
                                                                    <div class="f-16 nomargin shop-item-diqu">
                                                                            {{item.chuangjianshijian|moment('YYYY-MM-DD')}}
                                                                    </div>
                                                                    <div class="ivu-tag ivu-tag-blue ivu-tag-checked">
                                                                            <span class="ivu-tag-text ivu-tag-color-white">{{item.xinxileixing|get_gongxutype}}</span>
                                                                    </div>
                                                            </div>
                                                            
                                                            <!-- /price -->
                        
                                                           
                                                        </div>
                                                    </div>
                                                </div>


                                        </li><!-- /item -->
                                        {% endfor %}

                                    </ul>


                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
</section>
<!-- / -->

{% endblock %}

{% block script%}
<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript" src="/static/assets/js/view/demo.shop.js"></script>
<script src="/static/assets/city-picker/js/city-picker.data.js"></script>
<script src="/static/assets/city-picker/js/city-picker.js"></script>
<script>
{% set checkedvalue = shangpingleibie|jsonToStr|safe %}
var checkedvalue= {%if checkedvalue|length > 0%} {{checkedvalue}}{%else%}[]{%endif%};
$('#multicheck').on('click',function(){
    $('#singlecheckArea').hide()
    $('#multicheckArea').show()
    $('#multicheckdone').show()
    $('#multicheckcancle').show()
    $('#multicheck').hide()
})

$('#multicheckcancle').on('click',function(){
    // $('#singlecheckArea').show()
    // $('#multicheckArea').hide()
    // $('#multicheckdone').hide()
    // $('#multicheckcancle').hide()
    // $('#multicheck').show()
    var queryParams = $.getQueryParameters();
    delete queryParams.page
    delete queryParams.shangpingleibie
    window.location.href = location.pathname+'?'+quertString(queryParams)
})
$( "input[type=checkbox]" ).on( "click", function(){
    console.log($(this)[0])
    var value = $(this)[0].value
    if($(this)[0].checked&&checkedvalue.indexOf(value)==-1){
        checkedvalue.push(value)
    }else{
        checkedvalue = checkedvalue.filter(function(item){
            return item != value
        })
    }
   
} );
$('#multicheckdone').on('click',function(){
    console.log(checkedvalue)
    var queryParams = $.getQueryParameters();
    delete queryParams.page
    queryParams.shangpingleibie = JSON.stringify(checkedvalue)
    var locationPathname=location.pathname.replace(/(shangpingleibie_)(\d{1})\.([^%]+)/g,function(a,b,c,d,e){return b+c})
    window.location.href = locationPathname+'?'+quertString(queryParams)
})

var totalPages = {{totalPages}};

$('[data-toggle="city-picker"]').citypicker({
        responsive:true,
        placeholder: '请选择省/市',
        level:'city'
})

$('#resetdiqu').on('click',function(){
    var queryParams = $.getQueryParameters();
    delete queryParams.diqu
    delete queryParams.page
    window.location.href = location.pathname+'?'+quertString(queryParams)
})

$('[data-toggle="city-picker"]').on('cp:updated',function(e) {
    console.log('cp:updated',e.currentTarget.value)
    $('[data-toggle="city-picker"]').on('cp:close',function(e) {
        console.log('cp:close',e.currentTarget.value)
        if(e.currentTarget.value){
            var queryParams = $.getQueryParameters();
            delete queryParams.page
            queryParams.diqu = e.currentTarget.value
            window.location.href = location.pathname+'?'+quertString(queryParams)
        }
    })
})

</script>
{% endblock %}